<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用JavaScript的getElementsByTagName和className等方法或属性设计折叠与展开网页内容的特效</title>

<link href="css/public.css" rel="stylesheet" type="text/css" />
<style>
.sort_box {
	border: 1px solid #f6581e;
	padding: 1px;
	margin-bottom: 10px;
}
.sort_box a {
	color: #555;
	text-decoration: none;
}
.sort_box a:hover { text-decoration: none; }
.sort_box h3 {
	background: url(images/sort_box_bg.png) left 0 repeat-x;
	display: block;
	height: 35px;
	line-height: 35px;
	color: #fff;
	padding-left: 10px;
	font-size: 14px;
}
.sort_box li {
	border-top: solid 1px #fff;
	vertical-align: middle;
	zoom: 1;
	background: url(images/sort_box_bg.png) repeat-x left -62px;
}
.sort_box .hover, .sort_box .on { background-position: 0 -35px;}
.sort_box li .m {
	display: block;
	height: 27px;
	line-height: 27px;
	font-size: 14px;
	font-weight: bold;
	_overflow: hidden;
	background: url(images/sort_box_bg.png) no-repeat 12px -89px;
	padding: 0 10px 0 26px;
	border-bottom: solid 1px #d1d9e0;
}
.sort_box li .m .icon {
	display: inline-block;
	vertical-align: middle;
	float: right;
	background: url(images/sort_box_bg.png) no-repeat -16px -134px;
	width: 14px;
	height: 14px;
	margin-top: 6px;
	cursor: pointer;
}
.sort_box .hover .m .icon { background-position: 0 -134px; }
.sort_box .m .add { background-position: 0 -118px !important;}
.sort_box .m .minu { background-position: -16px -134px !important; }
.sort_box li .show{ display:block;} 
.sort_box li{position:relative;}
.sort_box  li a:hover{text-decoration:underline !important;}
.sort_box  li .link a:hover{text-decoration:none !important;}
.sort_box  .hover  .m{cursor:pointer !important;}
.sort _box li .link{margin:0;}
</style>

</head>

<body>

<script src="js/jquery.js" type="text/javascript"></script>

<div class="spacer"></div>
<div  id=""  class="con " name="4030">
  <div  id=""  class="col aside" name="4031">
    <div id="component_78140"></div>                
    <div class="sort_box" name="">
      <h3 align="center">童装童鞋</h3>
      <ul>
        <li>
          <span  onclick="change(4009391,this)"  class="m"  name="C2">
                 <span class="icon minu"></span>
          </span>
          <a href="" class="t" title="套装">套装</a>
          <div id="4009391" class="link hide"  name="C1">
             <span><a href="" title="运动套装" >运动套装</a></span>
             <span><a href="" title="内衣套装" >内衣套装</a></span>
             <span><a href="" title="礼服套装" >礼服套装</a></span>                 
             <span><a href="" title="其他">其他</a></span>
           </div> 
        </li>            
        <li>
          <span  class="m"  name="C2">
                 <span class="icon add"></span>
          </span>
          <a href="" class="t" title="亲子装">亲子装</a>
        </li>
      </ul> 
    </div>  
  </div>
</div>

<script type="text/javascript">
  $('.sort_box li.m').hover(function (){
	$(this).parent().addClass('hover');
	}, function () {
	  $(this).parent().removeClass('hover');
	});
  function change(id,node){
	var d = document.getElementById(id);
	var childNode = node.getElementsByTagName('span');
	node = childNode[0];
	var c = node.className;
	c = c.replace(/\s+/ig,' ');
	var cList = c.split(' ');
	if(cList[1] == 'add'){
	  node.className = 'icon minu';
	  d.className = 'link hide';}
	 else{
	  node.className = 'icon add';
	  d.className = 'link show';
	}
  }
</script>

</body>
</html>
